<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="setting-container">
    <div class="body-container">
      <div class="body-header">
        <span class="title">设备管理</span>
        <!-- <el-button type="primary" @click="handleAdd">+新增设备</el-button> -->
      </div>
      <el-table :data="data.tableData" stripe style="width: 100%;flex:1;">
        <el-table-column prop="date" label="设备名称" width="180" />
        <el-table-column prop="address" label="设备位置" />
        <el-table-column prop="date" label="IP地址" width="180" />
        <el-table-column prop="name" label="告警设置" width="180" />
        <el-table-column prop="name" label="操作" width="180">
          <template #default>
            <span
              class="table-action"
              @click="handleDetial"
              style="color:rgba(24, 144, 255, 1);cursor:pointer"
            >编辑</span>
            <span
              class="table-action"
              @click="handleDetial"
              style="color:rgba(24, 144, 255, 1);cursor:pointer"
            >删除设置</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="    display: flex;justify-content: flex-end;    align-items: center;height:50px;"
      />
    </div>
  </div>
  <!-- dialog -->
  <el-dialog v-model="data.dialogVisible" title="设备信息" width="30%" :before-close="handleClose">
    <div class="form-container">
      <div class="form-item">
        <span class="form-label">设备名称</span>
        <el-input class="form-element" placeholder="请输入设备编号，如C11"></el-input>
      </div>
      <div class="form-item">
        <span class="form-label">设备位置</span>
        <el-input class="form-element" placeholder="请输入设备所在位置，如大门口左侧"></el-input>
      </div>
      <div class="form-item">
        <span class="form-label">IP地址</span>
        <el-input class="form-element" placeholder="请输入设备IP接入地址"></el-input>
        <span class="button-text linkTest">链接测试</span>
      </div>
      <div class="form-item">
        <span class="form-label">分辨率</span>
        <el-select v-model="data.selectedCamera" class="form-element" placeholder="请选择设备使用的分辨率">
          <el-option
            v-for="(item,index) in cameraList"
            :key="index"
            :label="`${item.id} ${item.label}`"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="form-item">
        <span class="form-label">编码类型</span>
        <el-select v-model="data.selectedCamera" class="form-element" placeholder="请选择视频流编码类型">
          <el-option
            v-for="(item,index) in cameraList"
            :key="index"
            :label="`${item.id} ${item.label}`"
            :value="item.id"
          />
        </el-select>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="data.dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive } from "vue";
const data = reactive({
  tableData: [],
  total: 0,
  dialogVisible: false
});
const handleAdd = () => {
  data.dialogVisible = !data.dialogVisible;
};
</script>

<style lang='less' scoped>
.setting-container {
  flex: 1;
  padding: 24px;
  background: rgba(0, 16, 61, 1);
  position: relative;
  .body-container {
    background: #ffffff;
    position: absolute;
    left: 24px;
    right: 24px;
    top: 24px;
    bottom: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .body-header {
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 21px;
      display: flex;
      .title {
        flex: 1;
      }
    }
  }
}
.form-container {
  display: flex;
  flex-direction: column;
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .form-label {
      margin-right: 16px;
      width: 66px;
      height: 22px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.88);
    }
    .form-element {
      flex: 1;
    }
    .linkTest {
      margin-left: 16px;
    }
    .button-text {
      font-size: 14px;
      font-weight: 400;
      color: #1890ff;
    }
  }
}
</style>